---
title: Textarea
description: "`Textarea`は、複数行のテキスト入力を取得するために使用されるコンポーネントです。"
storybook: components-textarea--basic
source: components/textarea
style: components/textarea/textarea.style.ts
---

```tsx preview
<Textarea placeholder="Placeholder" />
```

## 使い方

:::code-group

```tsx [package]
import { Textarea } from "@yamada-ui/react"
```

```tsx [alias]
import { Textarea } from "@/components/ui"
```

```tsx [monorepo]
import { Textarea } from "@workspaces/ui"
```

:::

```tsx
<Textarea />
```

### バリアントを変更する

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### サイズを変更する

```tsx preview
<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size) => (
      <Textarea key={size} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>
```

### カラースキームを変更する

```tsx preview
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Textarea
        key={colorScheme}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        disabled
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
        readOnly
      />
    )}
  </For>
</VStack>
```

### 無効な入力にする

無効な状態にする場合は、`invalid`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
        invalid
      />
    )}
  </For>
</VStack>
```

### ボーダーの色を変更する

ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。

```tsx preview
<VStack>
  <Textarea focusBorderColor="green.500" placeholder="Custom border color" />
  <Textarea
    errorBorderColor="orange.500"
    invalid
    placeholder="Custom border color"
  />
</VStack>
```

### プレースホルダーをカスタマイズする

プレースホルダーの色を変更する場合は、propsに`_placeholder`を設定します。

```tsx preview
<Textarea
  placeholder="Custom placeholder"
  _placeholder={{ color: "green.500" }}
/>
```

### リサイズの動作を変更する

リサイズの動作を変更する場合は、`resize`に`"block"`、`"horizontal"`、`"vertical"`、`"none"`のいずれかを設定します。

```tsx preview
<VStack>
  <For each={["block", "horizontal", "vertical", "none"]}>
    {(resize) => (
      <Textarea
        key={resize}
        placeholder={toTitleCase(resize)}
        resize={resize}
      />
    )}
  </For>
</VStack>
```

### 自動リサイズを使用する

自動リサイズを有効にする場合は、`autosize`を`true`に設定します。

```tsx preview
<Textarea autosize placeholder="Autosize" />
```

### リサイズを制御する

```tsx preview functional client
const resizeRef = useRef<() => void>(null)
const onResize = () => {
  resizeRef.current?.()
}

return (
  <VStack>
    <Textarea placeholder="Use resize" resizeRef={resizeRef} />
    <Button alignSelf="flex-end" onClick={onResize}>
      Resize
    </Button>
  </VStack>
)
```

## Props

<PropsTable name="textarea" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
